<template>
	<view class="ui-cps-wrap">
		<view class="ui-cps-top">
			<view class="sharebtn" @click="handleShare"><text class="gui-icons gui-block gui-text">&#xe622;</text></view>                
			<cc-dialog-user ref="dialogShareref"></cc-dialog-user>
			<view class="ui-cps-img">
				<image class="um-cps-ux-promoter-info-composite_img" src="/static/imgs/bg.jpg"></image>
				<view class="ui-cps-char gui-color-white mt10 fz13 gui-flex gui-align-items-center">
					<text class="fz28 mr5" style="margin-top: -4px;">☛</text>长按上方图片保存并发送朋友圈
				</view>
			</view>
			<view class="gui-flex gui-footer-img gui-padding">
				<view :class="[currentIndex==0?'active':'']" @click="handleChangeImg(0)" class="img-item"><image src="@/static/logo.png"></image></view>
				<view :class="[currentIndex==1?'active':'']" @click="handleChangeImg(1)" class="img-item"><image src="@/static/imgs/bg.jpg"></image></view>
				<view :class="[currentIndex==2?'active':'']" @click="handleChangeImg(2)" class="img-item"><image src="@/static/logo.png"></image></view>
				<view :class="[currentIndex==3?'active':'']" @click="handleChangeImg(3)" class="img-item"><image src="@/static/logo.png"></image></view>
			</view>
		</view>
		<view class="mt20">
			<view class="gui-flex gui-justify-content-center ">
				<view @click="handleIncome" class="gui-button gui-color-white gui-border gui-bg-red" style="width: 200rpx;padding:0 10px!important;"><text class="button">查看我的收益</text></view>
			</view>
			<view class="gui-padding fz13 gui-color-gray">关注“学习512精品课推广”微信服务号，及时获取推广佣金到账信息。分享表示同意<text class="gui-color-green" @click="handleOpen">《学习512课程推广服务协议》</text></view>
			<cc-dialog-tuiguang ref="dialogtgref"></cc-dialog-tuiguang>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialogtgref:null,
				dialogShareref:null,
				currentIndex:0
			}
		},
		methods: {
			handleIncome(){
				uni.switchTab({
					url:"/pages/tabbar/income"
				})
			},
			
			handleOpen(){
				this.$refs.dialogtgref.handleOpen()
			},
			
			handleChangeImg(index){
				this.currentIndex = index
			},
			
			handleShare(){
				this.$refs.dialogShareref.handleOpen()
			}
		}
	}
</script>


<style scoped lang="scss">
.ui-cps-wrap {
	.ui-cps-top{
		background: #1C1C20;
		height: 60vh;
		box-sizing: border-box;
		justify-content:center;
		display:flex;
		position: relative;
		.gui-footer-img{
			position: absolute;
			bottom: 0;
			.img-item{
				width: 90rpx;
				height: 90rpx;
				margin: 0 5px;
				border-radius: 12rpx;
				border:3px solid transparent;
				image{width: 100%;height: 100%;}
				&.active{
					border:3px solid #2BD987
				}
			}
		}
		.sharebtn{
			position: absolute;
			right: 0;
			padding: 8px 12px;
			border-bottom-left-radius: 0.93333rem;
			border-top-left-radius: 0.93333rem;
			bottom: 90px;
			color: #fff;
			background: #2CC17B;
			text-align: center;
		}
		.ui-cps-img{
			position:relative;
			top:15px;
			width:58%;
			image{width:100%;height:70%}
		}
	}
}
</style>
